{include file="common/header-top" /}

<style>
    .van-grid-item__text{
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .job-item{
        display: block;
        margin-top: 5px;
    }

    .job-item-a{
        color: #2f2d33;
    }

    .job-item .job-item-img-icon {
        margin-top: 28px;
        padding-left: 10px;
    }

    .job-item .job-item-title{
        margin: 8px 0px 5px 2px;
        color: #3c3c3c;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }
    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .job-item .job-item-span-unit{
        font-size: 14px;
        color: #fcc48d;
    }

    .job-item .job-item-money-div{
        margin-top: 45px;
        float: right;
        margin-right: 5px;
    }


    .job-item .van-cell{
        padding: 0;
    }

    .job-item .van-cell:not(:last-child)::after{
        border-bottom: 0;
    }


</style>


<div id='app' v-cloak>

    <van-nav-bar title="兼职记录" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>


    <van-tabs v-model="currentTab" swipeable @click="changeTab">
        <van-tab title="全部" name="0"></van-tab>
        <van-tab title="审核中" name="1"></van-tab>
        <van-tab title="工作中" name="4"></van-tab>
        <van-tab title="报名成功" name="2"></van-tab>
        <van-tab title="未通过" name="3"></van-tab>
    </van-tabs>


    <!--岗位列表-->
    <van-row>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getJoinJobList"
        >
            <van-row v-for="item in listJob" class="job-item">
                <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a" v-if="!item.is_deleted">
                    <van-col span="5">
                        <van-icon :name="item.jobTypeImg" class="job-item-img-icon" size="45px"></van-icon>
                    </van-col>

                    <van-col span="19">
                        <van-col span="24">
                            <h4 class="job-item-title" style="display: inline-block">
                                <div class="van-ellipsis">{{item.title}}</div>
                            </h4>
                            <van-tag type="warning" mark style="float: right; margin-right: 5%;">{{item.applyStatusCh}}</van-tag>
                        </van-col>
                        <van-row>
                            <van-col span="16">
                                <van-cell
                                    icon="/__FRONT__/images/icon/publish-job-address.png"
                                    :title="item.address"
                                >
                                </van-cell>
                                <van-cell
                                    icon="/__FRONT__/images/icon/publish-job-time.png"
                                    :title="item.work_time"
                                ></van-cell>
                                <van-cell
                                    icon="/__FRONT__/images/icon/publish-job-money.png"
                                >
                                    <span class="job-item-span" slot="title">
                                        <span class="money-font">{{item.salary}}</span>{{item.salary_unitCh}}
                                    </span>
                                </van-cell>
                            </van-col>
                            <van-col span="8" style="text-align: right;">
                                <van-button @click.stop.prevent="cancelJob(item)" type="primary" size="small" v-if="canCancel(item)">取消报名</van-button>
                            </van-col>
                        </van-row>
                    </van-col>

                    <van-col span="24">
                        <van-divider style="margin: 3px 0;"></van-divider>
                    </van-col>
                </a>
            </van-row>


        </van-list>
    </van-row>
    <!--岗位列表-->




    {include file="common/foot-bar" /}



    <!--错误信息弹窗-->
    <van-popup
            v-model="showErrorPop"
            get-container="#app"
            position="center"
            style="width: 100%;"
            round
    >
        <van-row>
            <van-col span="24" style="text-align: center;">
                <span>取消原因?</span><br/>
                <span class="van-multi-ellipsis--l2" style="font-size: 12px;color: #fa976a;">
                    温馨提示：若录用成功以后，主动取消报名会扣除一定的信用分！
                </span>
            </van-col>
            <van-col span="24">
                <van-cell-group>
                    <van-field
                            v-model="errorMsg"
                            rows="5"
                            type="textarea"
                            autosize
                            placeholder="请输入取消兼职的原因?"
                    ></van-field>
                </van-cell-group>
            </van-col>
            <van-divider></van-divider>
            <van-col span="24" style="padding-bottom: 10px">
                <van-button
                        type="warning"
                        style="float: left; margin-left: 20px;"
                        size="small"
                        @click="showErrorPop = false"
                >取消</van-button>
                <van-button
                        type="primary"
                        style="float: right; margin-right: 20px;"
                        size="small"
                        @click="postCancelJob"
                >确定</van-button>
            </van-col>
        </van-row>
        </van-cell-group>
    </van-popup>
    <!--错误信息弹窗-->


</div>


<script>

    Vue.use(vant.Lazyload);


    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                //当前列表类型
                currentType: '{$type}',
                currentTab: '{$type}',
                page: 1,
                pageSize: 8,


                //兼职列表集
                listJob: [],
                loading: false,
                finished: false,

                showErrorPop: false,
                errorMsg: '',

                currentItem: {},


            };
        },

        created(){
        },

        computed:{

        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },

            //取消兼职
            canCancel(item){
                return (item.applyStatus == 2 || item.applyStatus == 1) ? true :false;
            },
            cancelJob(item){
                this.showErrorPop = true;
                this.currentItem = item;
            },
            postCancelJob(){
                var postData = {
                    jobId: this.currentItem.id,
                    applyId: this.currentItem.applyId,
                    message: this.errorMsg
                };
                axiosRequest.post('/api/user/cancelJob', postData).then(function (response) {
                    if (response.code == 200) {
                        vm.$data.listJob.forEach(function (one, index) {
                            if (one.applyId == response.data.applyId) {
                                one.applyStatus = response.data.status;
                                one.applyStatusCh = response.data.statusCh;
                            }
                        });
                        vant.Toast('取消兼职成功！');
                        vm.$data.currentItem = {};
                        vm.$data.errorMsg = '';
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                    vm.$data.showErrorPop = false;
                });
            },












            //切换tab
            changeTab(name, title){
                this.currentType = name;
                this.listJob = [];
                this.page = 1;
                this.pageSize = 8;
                this.loading = true;
                this.finished = false;
                this.getJoinJobList();
            },
            //获取我发布的兼职
            getJoinJobList(){
                var params = {
                    type: this.currentType,
                    page: this.page,
                    pageSize: this.pageSize
                };
                axiosRequest.get('/api/user/myJoinJob', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.listJob.push(item);
                            });
                            vm.$data.loading = false;
                            vm.$data.page += 1;

                            if (response.data.length < vm.$data.pageSize) {
                                vm.$data.finished = true;
                                vm.$data.loading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.finished = true;
                            vm.$data.loading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            }


        }
    });




</script>







{include file="common/foot-bottom" /}

